<template>
	<view class="recommend">
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<view class="swiper-item">
					<image src="https://yanxuan.nosdn.127.net/static-union/1728556207dc59e2.jpg?type=webp&imageView&quality=75&thumbnail=750x0" mode=""></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="https://yanxuan.nosdn.127.net/hxm/oly-picture/082adb7099171c9384255e016673ddd9.jpg?type=webp&imageView&quality=75&thumbnail=750x0" mode=""></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="https://yanxuan.nosdn.127.net/b2d39e65fb373d3a6c41283f9f37523b.jpg?type=webp&imageView&quality=75&thumbnail=750x0" mode=""></image>
				</view>
			</swiper-item>
		</swiper>

		<!-- 小图标 -->
		<view class="policyList" v-if="indexData.policyDescList">
			<view class="policyItem" v-for="(item, index) in indexData.policyDescList" :key="index">
				<image :src="item.icon" mode=""></image>
				<text class="desc">{{ item.desc }}</text>
			</view>
		</view>

		<!-- 10个导航图标 -->
		<view class="kingKongList" v-if="indexData.kingKongModule">
			<view class="kingKongItem" v-for="(item, index) in indexData.kingKongModule.kingKongList" :key="index">
				<image class="kingKongImg" :src="item.picUrl" mode=""></image>
				<view class="kingKongDesc">{{ item.text }}</view>
			</view>
		</view>

		<!-- 分类区数据 大图加滑块 categoryModule -->
		<view class="categoryList" v-if="indexData.categoryModule">
			<view class="categoryItem" v-for="(item, index) in indexData.categoryModule" :key="index">
				<!-- 大图 -->
				<image class="categoryImg" :src="item.titlePicUrl" mode=""></image>
				<!-- 滑块 -->
				<scroll-view class="categoryScroll" scroll-x="true" enable-flex>
					<view class="goodsItem" v-for="(ele, index) in item.itemList" :key="index">
						<image class="goodsImg" :src="ele.showPicUrl" mode=""></image>
						<view class="goodsText">{{ ele.name }}</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	name: 'Recommend',
	data() {
		return {};
	},
	computed: {
		...mapState('home', ['indexData'])
	}
};
</script>

<style lang="stylus">
.recommend
	swiper
		height 400rpx
		.swiper-item
			height 400rpx
			image
				width 100%
				height 400rpx
	.policyList
		display flex
		margin 10rpx 0
		.policyItem
			flex 1
			text-align center
			image
				width 40rpx
				height 40rpx
				vertical-align middle
				margin-right 5rpx
			.desc
				font-size 26rpx
	.kingKongList
		display flex
		flex-wrap wrap
		.kingKongItem
			width 20%
			text-align center
			margin 10rpx 0
			.kingKongImg
				width 100rpx
				height 100rpx
			.kingKongDesc
				font-size 24rpx
	.categoryList
		.categoryItem
			margin-bottom 5rpx 0
			.categoryImg
				height 370rpx
				width 100%
			.categoryScroll
				height 350rpx
				display flex
				.goodsItem
					height 300rpx
					margin 10rpx
					border: 1px solid #BB2c08
					.goodsImg
						background-color #f5f5f5
						width 200rpx
						height 200rpx
					.goodsText
						// 换行 过长...
						text-align center
						font-size 24rpx
						white-space pre-wrap
						overflow hidden
						text-overflow ellipsis
						display -webkit-box
						-webkit-box-orient vertical
						-webkit-line-clamp 2
</style>
。
